<!--学员处分信息修改-->
<template>
	<div >
        <div class="marginLeftRight">
            <div class="my-form-container" style="height:522px">
                <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm">
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</div>
                            <div class="my-form-item-value">{{ruleForm.studentCode}}</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</div>
                            <div class="my-form-item-value">{{ruleForm.studentName}}</div>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</div>
                            <div class="my-form-item-value">{{ruleForm.gender}}</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">学&nbsp;员&nbsp;队</div>
                            <div class="my-form-item-value">{{ruleForm.studentdui}}</div>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="24">
                            <div class="my-form-item-label">专业班次</div>
                            <div class="my-form-item-value">{{ruleForm.specialtyClassName}}</div>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">处分类别</div>
                            <el-form-item  prop="putype2" v-if="type == 1">
                                <div class="my-form-item-value">
                                    <el-select v-model="ruleForm.putype1" placeholder="请选择" class="inputWidth right10" @change="choseNext">
                                        <el-option v-for="item in type1" :key="item.typeName" :label="item.typename" :value="item.typeName"></el-option>
                                    </el-select>
                                    <el-select v-model="ruleForm.putype2" placeholder="请选择" class="inputWidth">
                                        <el-option v-for="item in type2" :key="item.typeName" :label="item.typename" :value="item.typeName"></el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                            <div class="my-form-item-value" v-else>{{ruleForm.putype1}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  {{ruleForm.putype2}}</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">下达部门</div>
                            <el-form-item  prop="issudept" v-if="type == 1">
                                <div class="my-form-item-value">
                                    <el-input class="inputWidth" v-model="ruleForm.issudept"></el-input>
                                </div>
                            </el-form-item>
                            <div class="my-form-item-value" v-else>{{ruleForm.issudept}}</div>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">生效日期</div>
                            <el-form-item  prop="effdate" v-if="type == 1">
                                <div class="my-form-item-value">
                                    <el-date-picker class="time" v-model="ruleForm.effdate" type="date" value-format="yyyy-MM-dd"></el-date-picker>
                                </div>
                            </el-form-item>
                            <div class="my-form-item-value" v-else>{{ruleForm.effdate}}</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">下达文号</div>
                            <el-form-item  prop="docno" v-if="type == 1">
                                <div class="my-form-item-value">
                                    <el-input class="inputWidth" v-model="ruleForm.docno"></el-input>
                                </div>
                            </el-form-item>
                            <div class="my-form-item-value" v-else>{{ruleForm.docno}}</div>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">处分文件</div>
                            <el-form-item  prop="pufile" v-if="type == 1">
                                <div class="my-form-item-value">
                                <el-input class="inputWidth" v-model="ruleForm.pufile"></el-input>
                                </div>
                            </el-form-item>
                            <div class="my-form-item-value" v-else>{{ruleForm.pufile}}</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">发文日期</div>
                            <el-form-item  prop="senddate" v-if="type == 1">
                                <div class="my-form-item-value">
                                    <el-date-picker class="time" v-model="ruleForm.senddate" type="date" value-format="yyyy-MM-dd"></el-date-picker>
                                </div>
                            </el-form-item>
                            <div class="my-form-item-value" v-else>{{ruleForm.senddate}}</div>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">撤销日期</div>
                            <el-form-item  prop="cencelDate" v-if="type == 1">
                                <div class="my-form-item-value">
                                    <el-date-picker class="time" v-model="ruleForm.cencelDate" type="date" value-format="yyyy-MM-dd"></el-date-picker>
                                </div>
                            </el-form-item>
                            <div class="my-form-item-value" v-else>{{ruleForm.cencelDate}}</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">撤销文件号</div>
                            <el-form-item  prop="docno" v-if="type == 1">
                                <div class="my-form-item-value">
                                <el-input class="inputWidth" v-model="ruleForm.docno"></el-input>
                            </div>
                            </el-form-item>
                            <div class="my-form-item-value" v-else>{{ruleForm.docno}}</div>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item lastOne">
                        <el-col :span="24">
                            <div class="my-form-item-label">处分原因</div>
                            <el-form-item  prop="reason"  v-if="type == 1">
                                <div class="my-form-item-value assessment-design" style="line-height:88px">
                                    <el-input v-model="ruleForm.reason" type="textarea" :rows="3" style="width: 600px;" placeholder="请输入内容"></el-input>
                                </div>
                            </el-form-item>
                            <div class="my-form-item-value" v-else>{{ruleForm.reason}}</div>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="button-group">
                <div class="" @click="save" v-show="type==1">保存</div>
                <div class="" @click="cancel">取消</div>
            </div>
        </div>
	</div>
</template>

<script>
import {getPunishDetail,updatePunishDetail} from "@/api/student";

  export default {
		data(){
		  return {
            type1:[],
            type2:[],
            type:'',
            ruleForm:{
                reason:'',//处分原因
                date:''
            },
            rules: {
                putype2: [
                    { required: true, message: '请选择处分类别', trigger: 'change' }
                ],
                issudept: [
                    { required: true, message: '请填写下达部门', trigger: 'blur' }
                ],
                effdate: [
                    { required: true, message: '请选择生效日期', trigger: 'change' }
                ],
                docno: [
                    { required: true, message: '请填写下达文件号', trigger: 'blur' }
                ],
                senddate: [
                    { required: true, message: '请选择发文日期', trigger: 'change' }
                ],
                reason: [
                    { required: true, message: '请填写处分原因', trigger: 'blur' }
                ]
            }
          }
		},
        mounted(){
            if(this.$route.query.type == 1){
                this.$set(this.$route.meta,'title','修改')
            }else{
                this.$set(this.$route.meta,'title','查看')
            }
            this.commonApi.getPunishList({typeParent:0}).then(res=>{
                this.type1 = res.data
            })
            
            this.getDetail();
            this.type = this.$route.query.type
            
        },
        methods: {
            //获取学员处分信息
            async getDetail(){
                let res = await getPunishDetail({puid:this.$route.query.puid});
                this.ruleForm = {...res.data.studentInfoVO,...res.data.punishmentInfoVO}
            },
            //获取下级处罚列表
            choseNext(e){
                this.commonApi.getPunishType({typeParent:e.value}).then(res=>{
                    this.type2 = res.records
                })
            },
            //保存数据
            save(){
                this.$refs['ruleForm'].validate(async(valid) => {
                    if (valid) {
                        let res = await updatePunishDetail(this.ruleForm);
                        if(res.code == 200){
                            this.$message({message: '修改成功',type: 'success'});
                            this.$router.push({
                                path:'/student/disciplinaryInfo/punishment/list'
                            })
                        }else{
                            this.$message.error(res.msg);
                        }
                    } 
                });
            },
            //取消
            cancel(){
                this.$router.push({
                    path:'/student/disciplinaryInfo/punishment/list'
                })
            }
        }
  };
</script>
<style lang="less" scoped>
	.assessment-edit-plan-container{
		.assessment-design {
			.el-textarea__inner {
				resize: none;
				font-size: 16px;
				color: rgba(0, 76, 167, 1);
			}
		}
	}
    
</style>
<style scoped lang="less" scoped>
@import "../../../../styles/commonCss.less";

    /deep/.demo-ruleForm{
        .el-form-item{
            margin-bottom: 0!important;
            width: 100%;
        }
        .el-form-item__error {
            top: 75%;
            left: 42px;
        }
    }
    .lastOne{
        border:none;height:100px;
        /deep/.el-form-item__error {
            top:96%;
        }
    }
    /deep/.my-form-item-label{justify-content: center;padding: 0!important;}
	.inputWidth{width: 163px;}
    .right10{margin-right: 10px;}
    .time{
        width: 177px;
        /deep/.el-input__inner{
            height: 36px;
            line-height: 36px;
        }
        /deep/.el-input__icon{
            font-size: 20px;
            margin-top: 3px;
        }
        /deep/.el-input__prefix{
            right: 16px;
        }
    }
    .small-btn{
        display: flex;
        align-items: center;
        padding: 5px 19px;
        opacity: 1;
        border-radius: 6px;
        background: #EFEBFF;
        border: 1px solid #5230E9;
        color: #5230E9 ;
        font-size: 14px;
        width: 96px;
        height: 27px;
        cursor: pointer;
    }
	.button-group {
		margin-top: 68px;
		padding-bottom: 132px;
		text-align: center;
		> div {
			display: inline-block;
			font-size: 16px;
			padding: 6px 22px;
			border-radius: 6px;
			cursor: pointer;
			&:nth-child(1) {
				color: #F3B815;
				border: 1px solid #F3B815;
				background: #FFF6EF;
				margin-right: 187px;
			}
			&:nth-child(2) {
				color:#FF3819;
				background: #FFEFEF;
				border: 1px solid #FF3819;
			}
		}
	}
</style>